<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>02_JSX_DEMO</title>
</head>
<body>
  <h2>前端JS框架列表</h2>
  <div id="example1"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    /*
     功能: 动态展示列表数据
     问题：如何将一个数组的数组，转换为一个标签的数组
          使用数组的Map方法
     */
    const names = ['jQuery', 'zepto', 'angular', 'react', 'vue'];

    // 创建虚拟DOM
    /**
     <ul>
        <li></li>
        <li></li>
        <li></li>
     </ul>
     */
    var ul = (
            <ul>
              {names.map((name, index) => <li key={index}>{name}</li>)}
            </ul>
    )
    // 渲染虚拟DOM
    ReactDOM.render(ul, document.getElementById('example1'));

  </script>
</body>
</html>
